<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精品服装</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 302px;
            height: 250px;
            border: 1px solid pink;
            margin: 100px auto;
            overflow: hidden;
        }

        ul {
            list-style: none;
            float: left;
        }
        a{
            text-decoration: none;
            color: black;
        }

        .left > li > a , .right >li > a {
            display: block;
            width: 50px;
            height: 27px;
            border-bottom: 1px solid pink;
            text-align: center;
            line-height: 27px;
            background: url('./imgs/lili.jpg') repeat-x;
            font-size: 12px;
        }
        .left > li > a:hover , .right >li > a:hover{
            background: url('./imgs/abg.gif') repeat-x;
        }
        .center {
            width: 200px;
            height: 250px;
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }

    </style>
    <script src="../lib/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $(".left > li").mouseenter(function(){
                $(".center > li").eq($(this).index()).stop().show(500).siblings().stop().hide();
            });
            $(".right > li").mouseenter(function(){
                $(".center > li").eq($(this).index()+9).stop().show(500).siblings().stop().hide();
            });
        });
    </script>
</head>

<body>
    <div class="box">
        <ul class="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴 </a></li>
            <li><a href="#">冬裙 </a></li>
            <li><a href="#"> 呢大衣 </a></li>
            <li><a href="#"> 毛衣 </a></li>
            <li><a href="#"> 棉被 </a></li>
            <li><a href="#"> 女裤 </a></li>
            <li><a href="#"> 羽绒服 </a></li>
            <li><a href="#"> 牛仔裤</a></li>
        </ul>
        <ul class="center">
            <li><a href="#"><img src=" ./imgs/女靴.jpg"></a></li>
            <li><a href="#"><img src="./imgs/雪地靴.jpg"></a></li>
            <li><a href="#"><img src="./imgs/冬裙.jpg"></a></li>
            <li><a href="#"><img src="./imgs/呢大衣.jpg"></a></li>
            <li><a href="#"><img src="./imgs/毛衣.jpg"></a></li>
            <li><a href="#"><img src="./imgs/毛衣.jpg"></a></li>
            <li><a href="#"><img src="./imgs/女裤.jpg"></a></li>
            <li><a href="#"><img src="./imgs/羽绒服.jpg"></a></li>
            <li><a href="#"><img src="./imgs/牛仔裤.jpg"></a></li>
            <li><a href="#"><img src="./imgs/女包.jpg"></a></li>
            <li><a href="#"><img src="./imgs/男包.jpg"></a></li>
            <li><a href="#"><img src="./imgs/登山鞋.jpg"></a></li>
            <li><a href="#"><img src="./imgs/皮带.jpg"></a></li>
            <li><a href="#"><img src="./imgs/围巾.jpg"></a></li>
            <li><a href="#"><img src="./imgs/皮衣.jpg"></a></li>
            <li><a href="#"><img src="./imgs/男毛衣.jpg"></a></li>
            <li><a href="#"><img src="./imgs/男棉服.jpg"></a></li>
            <li><a href="#"><img src="./imgs/男靴.jpg"></a></li>
        </ul>
        <ul class="right">
            <li><a href="#"> 女包</a></li>
            <li><a href="#"> 男包</a></li>
            <li><a href="#"> 登山鞋</a></li>
            <li><a href="#"> 皮带</a></li>
            <li><a href="#"> 围巾</a></li>
            <li><a href="#"> 皮衣</a></li>
            <li><a href="#"> 男毛衣</a></li>
            <li><a href="#"> 男棉服</a></li>
            <li><a href="#"> 男靴</a></li>
        </ul>
    </div>
</body>

</html>